<template>
  <div class="scrollbox">
    <!-- 头部 -->
    <v-header></v-header> 
    <div class="dis10"></div>   
    <div class="listbox aps8"> 
      <v-list api="resources_cate.get_list" ref="list" cols="50,50,350,0,100,150" :params="params" :hidSearch="true" cards="1">
        <template slot="search">
          <el-button class="operate" size="small" type="primary" icon="el-icon-plus" @click="edit(params)">新增分类
          </el-button>
          &nbsp;&nbsp;&nbsp;
          <el-select v-model="params.type" size="small">
            <el-option :value="index" :label="item" v-for="(item, index) in $config('resources_type')" :key="index"></el-option>
          </el-select>
          <span class="fr">
          <el-button class="operate" size="small" type="default" @click="refresh">清除缓存
          </el-button>
          </span>
        </template>
        <template slot="head" slot-scope="props">
          <thead>
            <tr>
            <th>-</th>
            <th>ID</th>
            <th>名称</th>
            <th>描述</th>
            <th>模型</th>
            <th>操作</th>
          </tr>
          </thead>
        </template>
        <template slot="item" slot-scope="props">
          <tr class="tr">
          <td><i :class="props.item.icon" class="f18 font-blue"></i></td>
          <td><span class="font-gray2">{{ props.item.id }}</span></td>
          <td :style="'cursor:pointer;textIndent:' + props.item.level * 24 + 'px'">
            <span class="f14 font-blue">{{props.item.name}}
              <span class="sort f11 font-gray2" v-if="props.item.sort > 0"> ({{props.item.sort}}) </span></span>
          </td>
          <td>
           <span class="font-gray2"> {{props.item.remark}} </span>
          </td>
          <td>
           {{ props.item.model_name }}
          </td>
          <td class="t0">
              <el-button size="mini" icon="el-icon-edit" type="primary" circle
                @click="edit(props.item)">
              </el-button>
              <el-button size="mini" type="default" icon="el-icon-delete" circle
                @click="del(props.item)">
              </el-button>
          </td>
        </tr>
        </template>
      </v-list>
    </div>

    <!-- 编辑 -->
    <el-dialog
      :title="editData.title"
      :visible.sync="editData.status"
      width="680px" top="7vh">
      <div class="dialogform">
        <el-form :model="form" :rules="rules" ref="form" label-width="120px" label-position="right" class="demo-ruleForm">          
          
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="form.name" class="w300"></el-input>
          </el-form-item>
          <el-form-item label="图标icon" prop="icon">
            <el-input v-model="form.icon" class="w300"></el-input>
          </el-form-item>
          <el-form-item label="上级分类">
            <el-select v-model="form.pid" placeholder="请选择上级分类">
              <el-option value="0" label="主分类"></el-option>
              <el-option :style="'textIndent:' + item.level * 2 + 'em'" v-for="(item,index) in editData.cate" :key="index"
                :label="item.name" :value="item.id" v-if="item.content != '@all@'"></el-option>
            </el-select>
          </el-form-item> 
          <el-form-item label="绑定模型">
            <el-select v-model="form.model_id" placeholder="请选择模型">
              <el-option  v-for="(item,index) in modelList" :key="index"
                :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item> 

          <el-form-item label="描述">
            <el-input type="textarea" :rows="3" class="w300" placeholder="分类描述" v-model="form.bz"></el-input>
          </el-form-item>        
          <el-form-item label="排序" prop="sort">
            <el-input v-model="form.sort" class="w100"></el-input>
          </el-form-item>
          <el-form-item label="" prop="inlock">
            <el-button type="primary" @click="save">保 存</el-button>
            <el-button @click="editData.status = false">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="tc"> 
      </div>
    </el-dialog>
    <!-- 编辑结束 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        id: 0,
        name: '',
        icon: '',
        sort: '',
        bz: '',
        pid: '0',
        model_id: ''
      },
      editData: {
        status: false,
        title: '新增/修改权限分组',
        id: 0,
        cate: []
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { min: 1, message: "名称不能为空", trigger: "blur" }
        ],
      },
      params: {
        type: 'video'
      },
      modelList: []
    };
  },
  methods: {
    edit(item) {
      this.editData.status = true
      this.editData.id = item.id || 0
      this.editData.cate = this.$refs.list.getData().list

      this.form.id = this.editData.id
      this.form.type = this.params.type
      this.form.icon = item.icon || ''
      this.form.name = item.name || ''
      this.form.sort = item.sort || '0'
      this.form.pid = item.pid || '0'
      this.form.bz = item.bz || ''
      this.form.model_id = item.model_id || ''
    },
    save() {
      let that = this
      that.form.type = that.params.type
      that.$refs['form'].validate((valid) => {
        if (valid) {
          let url = that.editData.id > 0 ? 'resources_cate.edit_cate' : 'resources_cate.add_cate'
          that.$api.post(url, that.form).then((res) => {
            if (res.status === 1) {
              that.$success(res.msg)
              that.$refs.list.fetchData()
              that.editData.status = false
            } else {
              that.$error(res.msg)
            }
          })
        }
      })
    },
    // 刷新缓存
    refresh() {
      this.$api.get("resources_cate.refresh_cate", this.params).then(res => {
        if (res.status === 1) {
          this.$success(res.msg)
        }
      })
    },
    del(row) {
      let that = this
      that.$confirm('此操作会将该彻底删除，不可恢复, 是否继续?', '删除提醒').then(() => {
        that.$api.post('resources_cate.del_cate', { id: row.id, type: this.params.type }).then((res) => {
          if (res.status === 1) {
            that.$success(res.msg)
            that.$refs.list.fetchData()
          } else {
            that.$error(res.msg)
          }
        })
      }).catch(() => {
      })
    }
  },
  mounted() {
    this.$api.get('resources_model.get_model_list').then((res) => {
      if (res.status == 1) {
        this.modelList = res.data.list
      }
    })
  }
};
</script>

<style lang="scss" scoped>
.tabs {
  width: 290px;
}
</style>
